<template>
    <!-- 自定义播放组件 -->
    <div class="flex">
        <div class="sw-title-content" style="width: 6.75rem;">
            <div class="flex1" style="white-space: nowrap;overflow: hidden;">
                <img class="sw-title-img" style="width: 2.35rem;height: 2.35rem;" src="@/assets/images/station.png">
                <span class="sw-room-num" style="font-size: 0.7rem;">{{ station.roomNum || 0 }}个台站</span>
            </div>
            <div class="flex1" style="font-size: 1.2rem;">{{ station.name }}</div>
        </div>
        <div style="overflow: hidden;background-color: #1A2034;padding: 1.35rem 2.3rem;">
            <div class="moveLeft-page" :id="id" style="height: 17.5rem;">
                <room-station v-for="video, index in [stationList[0]]" :url="video.url" :roomName="video.name" :key="video.name"
                    v-show="index < showNum"></room-station>
            </div>
        </div>

    </div>
</template>

<script>
import roomStation from './room-station.vue';

export default {
    name: 'sw-station-list',
    components: { roomStation },
    props: {
        // 间隔时间
        step: { type: Number, default: 3000 },
        // 显示的视频数量
        showNum: { type: Number, default: 14 },
        // 台站数据
        station: {
            required: true,
            type: Object, default: () => {
                return {
                    stationListAll: [],
                    name: '',
                    roomNum: 0
                }
            }
        }
    },
    computed: {
        stationList() {
            let startList = [];
            let endList = []
            if (this.stationListAll && this.stationListAll.length > 0) {
                for (let i in this.stationListAll) {
                    if (i < this.startIndex) {
                        endList.push(this.stationListAll[i])
                    } else {
                        startList.push(this.stationListAll[i])
                    }
                }
            }
            let list = startList.concat(endList);
            return list.splice(0, this.showNum + 2) || [];
        }
    },
    watch: {
        // 存在全屏的视频则停止滚动
        isFullscreen(val) {
            if (val) {
                if (this.interval) clearInterval(this.interval);
            } else {
                this.start()
            }
        }
    },
    data() {
        return {
            id: null,
            // 起始索引
            startIndex: 0,
            // 是否开启了全屏
            isFullscreen: false,
            // 机房数量
            roomNum: 0,
            // 循环函数
            interval: null,
            // 视频列表
            stationListAll: []
        }
    },
    created() {
        this.id = this.$uuid();
        if (this.station.stationListAll) this.stationListAll = this.station.stationListAll
    },
    mounted() {
        this.$nextTick(() => {
            try {
                if (this.showNum < this.stationListAll.length) this.start()
            } catch (e) { console.log('计算出错', this.id) }

        })
    },
    methods: {
        // 开始循环
        start() {
            if (this.interval) clearInterval(this.interval);
            this.interval = setInterval(() => {
                if (this.stationListAll && this.stationListAll.length > 0) {
                    if (this.startIndex < this.stationListAll.length - 1) {
                        this.startIndex++
                    } else {
                        this.startIndex = 0
                    }
                }
            }, this.step)
        },

    }
}
</script>

<style lang="scss" scoped>
.sw-title-content {
    width: 8rem;
    padding-left: 1.5rem;
    box-sizing: border-box;
    font-size: 1.25rem;
}

.sw-title-img {
    margin-top: 1rem;
    width: 3rem;
}


/* 定义动画 */
@keyframes moveLeft {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-17.5rem);
    }
}

.moveLeft-page {
    // animation: moveLeft 3s infinite;
    width: 100vw;
    display: flex;
    white-space: nowarp;
}
</style>